<template>
	<Card>
		<div class="flexCSB">
			<Button type="primary" @click="create">新增用户</Button>
			<div>
				<Input style="width:300px" placeholder="请输入用户账号" suffix="ios-search" @on-change="find"></Input>
			</div>
		</div>
		<Table class="table" :loading="loading1" highlight-row :columns="columns" :data="data"></Table>
		<Page show-total class="page" :total="total" :current.sync="current" :page-size="size" show-elevator @on-change="changePage" />
		<Modal title="操作" v-model="modal">
			<Form ref="form" :model="newData" :label-width="130">
				<FormItem label="姓名：" prop="realName">
	          		<Input v-model="newData.realName" clearable></Input>
	        	</FormItem>
	        	<FormItem label="手机号：" prop="phone">
	          		<Input v-model="newData.phone" clearable></Input>
	        	</FormItem>
	        	<FormItem label="账号：" prop="nickName">
	          		<Input v-model="newData.nickName" clearable></Input>
	        	</FormItem>
				<FormItem label="密码：" prop="password">
	          		<Input type="password" v-model="newData.password" clearable></Input>
	        	</FormItem>
	        	<FormItem label="角色：" prop="roleId">
	          		<Select v-model="newData.roleId" style="width:358px">
						<Option v-for="item in roles" :value="item.id" :key="item">{{ item.name }}</Option>
					</Select>
	        	</FormItem>
				<FormItem v-if="show" label="状态：" prop="states">
	          		<Select v-model="newData.states" style="width:358px">
						<Option v-for="item in states" :value="item.id" :key="item">{{ item.name }}</Option>
					</Select>
	        	</FormItem>
				<FormItem label="是否验证码登录：" prop="validCodeSwitch">
	          		<Select v-model="newData.validCodeSwitch" style="width:358px">
						<Option v-for="item in validCodeSwitchList" :value="item.value" :key="item">{{ item.lable }}</Option>
					</Select>
	        	</FormItem>
	        </Form>
			<div slot="footer">
	        	<Button class="Button" type='primary' @click="submit" :loading="loading2">确认提交</Button>
	      	</div>
		</Modal>
	</Card>
</template>

<script>
import {md5} from '../../config/md5.js'
	export default{
		data(){
			return{
				columns:[
					{title:'角色名称',key:'roleName',align: 'center'},
					{title:'姓名',key:'realName',align: 'center'},
					{title:'账号',key:'nickName',align: 'center'},
					{title:'手机号',key:'phone',align: 'center'},
					{title:'创建时间',key:'gmtCreate', align: 'center',width:'180px'},
					{title:'状态', align: 'center',
		            	render: (h, params) => {
							 let color = "";
							 let content = "";
							 if (params.row.states == 2) {
							 	color = "blue";
								 content="启用"
							 }
							 if (params.row.states == 3) {
								 color = "red";
								 content = "禁用"
							}
		              		return h(
							 "Tag",
							 {
								 props: {  color: color },
							 },
							 	content
							);
		           	 	}
		          	},
					  {title:'是否验证码登录', align: 'center',
		            	render: (h, params) => {
							 let color = "";
							 let content = "";
							 if (params.row.validCodeSwitch) {
							 	color = "blue";
								 content="是"
							 }else{
								  color = "red";
								 content = "否"
							 }
		              		return h(
							 "Tag",
							 {
								 props: {  color: color },
							 },
							 	content
							);
		           	 	}
		          	},
		          	{title:'操作', align: 'center',width:'180px',
		            	render: (h, params) => {
		              		return h('div', [
		                		h('Button', {
		                    		props: {type: 'primary'},
									style:{
										'margin-left':'10px'
									},
		                    		on: {
		                    			click: () => { this.change(params) }
		                  			}
		                		}, '修改'),
								h('Button', {
		                    		props: {type: 'error'},
									style:{
										'margin-left':'10px'
									},
		                    		on: {
		                    			click: () => { this.del(params) }
		                  			}
		                		}, '删除'),
		              		])
		           	 	}
		          	},
				],
				data:[],
				total:0,
				current:1,
				size:10,
				username:'',
				password:'',
				roles:[],
				validCodeSwitchList:[
					{
						lable:'是',
						value:'true'
					},
					{
						lable:'否',
						value:'false'
					}
				],
				show:false,
				loading1:false,
				loading2:false,
				states:[
					{
						id:'2',
						name:'启用'
					},
					{
						id:'3',
						name:'禁用'
					}
				],
				modal:false,
				newData:{
					realName: '',
					password: '',
					phone: '',
					roleId: '',
					nickName: '',
					states:'',
					validCodeSwitch:''

				},
		        id:''

			}
		},
		created(){
			this.getData()
			this.getRoleOption()
		},
		methods:{
			// 获取列表
			getData(){
				this.loading1 = true
				this.$http('/stage/role/getSysUser',{
					current: this.current,
					size: this.size,
					name:this.username
		      	},'post',(res)=>{
		        	if(res.data.code == 200){
		        		this.data = res.data.data.records
		        		this.total = res.data.data.total
		        	}else{
		        		this.$Message.error(res.data.msg)
		        	}
					this.loading1 = false
		        })
			},
			// 切换页码
			changePage(data){
				this.current = data
				this.getData()
			},
			// 获取角色下拉列表
			getRoleOption(){
				this.$http("/chongqing/stage/role/getRoleOption",{},"get",(res)=>{
					console.log(res);
					if(res.data.code==200){
						this.roles=res.data.data
					}else{
						this.$Message.error(res.data.msg)
					}
				})
			},
			// 提交
			submit(){
          		this.loading2 = true
          		var data = {}
          		// 新增
          		if(this.id == ''){
					var reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ 
					var reg1=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/
					if(!(reg.test(this.newData.phone))){
						this.$Message.error('请输入正确的手机号')
						this.loading2=false
						return false
					}
					if(!(reg1.test(this.newData.password))){
						this.$Message.error('密码由字母和数字组成且长度大于等六位')
						this.loading2=false
						return false
					}
          			data = {
          				realName: this.newData.realName,
						password: md5(this.newData.password),
						phone: this.newData.phone,
						roleId: this.newData.roleId,
						nickName: this.newData.nickName,
						validCodeSwitch:this.newData.validCodeSwitch
          			}
          		}
          		// 修改
          		else{
					  var reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ 
					var reg1=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/
					if(!(reg.test(this.newData.phone))){
						this.$Message.error('请输入正确的手机号')
						this.loading2=false
						return false
					}
					if(!(reg1.test(this.newData.password)||this.newData.password=='******')){
						this.$Message.error('密码由字母和数字组成且长度大于等六位')
						this.loading2=false
						return false
					}
					if(this.newData.password=='******'){
						data = {
          				realName: this.newData.realName,
						password: this.password,
						phone: this.newData.phone,
						roleId: this.newData.roleId,
						nickName: this.newData.nickName,
						states:this.newData.states,
						validCodeSwitch:this.newData.validCodeSwitch,
						id: this.id,
          			}
					}else{
						data = {
          				realName: this.newData.realName,
						password: md5(this.newData.password),
						phone: this.newData.phone,
						roleId: this.newData.roleId,
						nickName: this.newData.nickName,
						states:this.newData.states,
						validCodeSwitch:this.newData.validCodeSwitch,
						id: this.id,
          			}
					}
          			
          		}
					if(this.show){
						this.$http('/stage/role/updateSysUser',data,'post',(res)=>{
								if(res.data.code == 200&&res.data.data){
									this.$Message.success('修改用户成功')
									this.modal = false
									this.current = 1
									this.getData()
								}else{
									this.$Message.error(res.data.msg)
								}
								this.loading2 = false
							})
					}else{
						this.$http('/stage/role/addSysUser',data,'post',(res)=>{
								if(res.data.code == 200&&res.data.data){
									this.$Message.success('新增用户成功')
									this.modal = false
									this.current = 1
									this.getData()
								}else{
									this.$Message.error(res.data.msg)
								}
								this.loading2 = false
							})
					}
				
			},
			del(params){
				this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				})
				.then(() => {
					this.$http(
					'/stage/role/deleteSysUser',
					{
						id: params.row.id
					},
					'get',
					(res) => {
						console.log(res)
						if (res.data.data == true) {
						this.$message({
							type: 'success',
							message: '删除成功!'
						})
						// this.reload();
						this.getData()
						}else{
							this.$message({
							type: 'error',
							message: res.data.msg
						})
						}
					}
					)
				})
				.catch(() => {
					this.$message({
					type: 'info',
					message: '已取消删除'
					})
				})
			},
			// 新增
			create(){
				this.show=false
				this.modal = true
				this.newData = {
					realName: '',
					password: '',
					phone: '',
					roleId: '',
					nickName: '',
					states:'',
					validCodeSwitch:''
				}
				this.id = ''
				this.$refs['form'].resetFields()
			},
			// 修改
			change(params){
				console.log(params);
				this.show=true
				this.id = params.row.id
				this.newData = {
					nickName: params.row.nickName,
					phone: params.row.phone,
					roleId: params.row.roleId,
					realName: params.row.realName,
					states:String(params.row.states),
					password:'******',
					validCodeSwitch:String(params.row.validCodeSwitch)
				}
				this.password=params.row.password
				this.modal = true
			},
			// 搜索
			find(data){
				this.username = data.target.value
				this.current = 1
				this.getData()
			},

		},
	}
</script>

<style scoped>

</style>